<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="120px">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>当日统计数据（可选4项）
          </span>
        </div>
        <el-row>
          <el-col :span="24">
            <el-form-item label="显示统计项">
              <el-checkbox-group v-model="form.leftTop">
                <el-checkbox label="1">当日航班总量</el-checkbox>
                <el-checkbox label="2">当日航班延误比例</el-checkbox>
                <el-checkbox label="3">当日突发事件</el-checkbox>
                <el-checkbox label="4">当日预警条数</el-checkbox>
                <el-checkbox label="5">当日航班取消比例</el-checkbox>
                <el-checkbox label="6">当日游客吞吐量</el-checkbox>
                <el-checkbox label="7">当日货邮吞吐量</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card" :style="{marginTop: '15px'}">
        <div slot="header" class="clearfix">
          <span>左下图表数据
          </span>
        </div>
        <el-row>
          <el-col :span="24">
            <el-form-item label="图表数据项">
              <el-radio-group v-model="form.leftBottom">
                <el-radio label="1" name="1">航班延误比例</el-radio>
                <el-radio label="2" name="2">航班取消比例</el-radio>
                <el-radio label="3" name="3">航班正常比例</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card" :style="{marginTop: '15px'}">
        <div slot="header" class="clearfix">
          <span>常驻监控位配置（共3个常驻监控位）
          </span>
        </div>
        <el-table :data="cctvList" size="mini">
          <el-table-column label="监控位标识" align="center" prop="point" />
          <el-table-column label="监控位名称" align="center" prop="title" />
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="handleChange(scope.row)">替换</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-card class="box-card" :style="{marginTop: '15px'}">
        <div slot="header" class="clearfix">
          <span>右中图表数据
          </span>
        </div>
        <el-row>
          <el-col :span="24">
            <el-form-item label="图表数据项">
              <el-radio-group v-model="form.rightMiddle">
                <el-radio label="1">当日航班统计</el-radio>
                <el-radio label="2">当日运输对象统计</el-radio>
                <el-radio label="3">当日事件类型统计</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card" :style="{marginTop: '15px'}">
        <div slot="header" class="clearfix">
          <span>月度安全报告
          </span>
          <el-button style="float: right; padding: 3px 0" type="text">添加报告</el-button>
        </div>
        <el-table :data="reportList" size="mini">
          <el-table-column label="报告名称" align="center" prop="reportName" />
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="handleChange(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-card class="box-card" :style="{marginTop: '15px'}">
        <div slot="header" class="clearfix">
          <span>不安全事件统计
          </span>
          <el-button style="float: right; padding: 3px 0" type="text">添加事件</el-button>
        </div>
        <el-table :data="eventList" size="mini">
          <el-table-column label="不安全事件" align="center" prop="eventName" />
          <el-table-column label="关联事件" align="center" prop="relationEvent" />
          <el-table-column label="紧急程度" align="center" prop="status">
            <template slot-scope="scope">
              <el-tag type="success" v-if="scope.row.status == 0">一般</el-tag>
              <el-tag v-if="scope.row.status == 1">较大</el-tag>
              <el-tag type="warning" v-if="scope.row.status == 2">重大</el-tag>
              <el-tag type="danger" v-if="scope.row.status == 3">特别重大</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="handleChange(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <div style="text-align: center;margin-top: 15px;">
        <el-button type="primary">保存配置</el-button>
      </div>
    </el-form>
  </div>
</template>
<script>
export default {

  name: 'ScreenConfig',

  data() {
    return {
      form: {
        leftTop: ["1", '2', '3', '4'],
        leftBottom: "1",
        rightMiddle: '1'
      },
      cctvList: [{
          point: 'port_1',
          title: '1号停机坪'
        },
        {
          point: 'floor_1',
          title: 'T1航站楼值机柜台'
        },
        {
          point: 'wait_1',
          title: '23号登机口'
        }
      ],
      eventList: [
        { eventName: '跑道入侵', relationEvent: '3号降落跑道入侵事件', status: 2 }, { eventName: '机件脱落', relationEvent: 'HN2238航班起飞前安全检查异常', status: 1 }, { eventName: '鸟情事件', relationEvent: 'CZ3343航班起飞前遭遇鸟情', status: 1 }, { eventName: '双发停车', relationEvent: 'HD2334航行途中突发双发停车事件', status: 3 }
      ],
      reportList: [
        { reportName: '2022年11月月度安全报告' }, { reportName: '2022年10月月度安全报告' }, { reportName: '2022年9月月度安全报告' }, { reportName: '2022年8月月度安全报告' }, { reportName: '2022年7月月度安全报告' }, { reportName: '2022年6月月度安全报告' }, { reportName: '2022年5月月度安全报告' }, { reportName: '2022年4月月度安全报告' }, { reportName: '2022年3月月度安全报告' }
      ]
    }
  },
  methods: {
    handleChange(data) {

    }
  }
}

</script>
<style lang="scss" scoped>
::v-deep {

  .el-checkbox__label,
  .el-radio__label {
    color: white;
  }
}

</style>
